// npm i crypto-js string-random weixin-js-sdk
// npm i --save-dev @types/crypto-js
import crypto from "crypto-js";
import axios from "axios";
import random from "string-random";

import wx from "weixin-js-sdk";

const WX_URL = window.location.href.split("#")[0];
const WX_BASE_URL = "http://127.0.0.1:8058/api/";

// 调试使用
// const APP_ID = "wx5322ebef16888678";
// const APP_SECRET = "5e7139c342b1621f88aaf9bf6e75a652";

// 央视网
const APP_ID = "wxa7dfa25bccd18594";
// const APP_SECRET = "f7b5cf8f2097ef61f4e544596495a075";

const generatorSha1 = (str: any) => {
  return crypto.SHA1(str).toString(crypto.enc.Hex);
};

/**
 * 获签名信息
 */
const getSignature = async () => {
  const getticketResult = await axios.get(`wxMini/getTicket`, {
    baseURL: WX_BASE_URL,
  });
  const jsapi_ticket = getticketResult.data.data.ticket;
  const nonceStr = random(16); // 'Wm3WZYTPz0wzccnW'
  const timestamp = new Date().getTime();
  const str = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${WX_URL}`;
  const signature = generatorSha1(str);
  const result = {
    nonceStr,
    jsapi_ticket,
    timestamp,
    signature,
    appId: APP_ID,
  };
  return result;
};

/**
 * 通过config接口注入权限验证配置
 * 请在前端页面调用
 * @param {Object} params
 */
const wxConfig = async (params: any) => {
  const { appId, timestamp, nonceStr, signature, jsApiList, onReady, onError } =
    params;
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId, // 必填，公众号的唯一标识
    timestamp, // 必填，生成签名的时间戳
    nonceStr, // 必填，生成签名的随机串
    signature, // 必填，签名
    jsApiList: jsApiList, // 必填，需要使用的JS接口列表
  });
  // 通过ready接口处理成功验证
  wx.ready(function () {
    onReady && onReady();
  });

  // 通过error接口处理失败验证
  wx.error(function (error: any) {
    onError && onError(error);
  });
};

const shareApp = (params: any) => {
  const { title, desc, link, imgUrl } = params;
  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
  wx.updateAppMessageShareData({
    title, // 分享标题
    desc, // 分享描述
    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl, // 分享图标
    success: function () {
      // 设置成功
    },
  });

  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
  wx.updateTimelineShareData({
    title, // 分享标题
    link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl, // 分享图标
    success: function () {
      // 设置成功
    },
  });

  // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
  wx.onMenuShareWeibo({
    title, // 分享标题
    desc, // 分享描述
    link, // 分享链接
    imgUrl, // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    },
  });
};

/**
 * 微信Api初始化
 * 请在需要分享的前端页面调用
 */
export const wxShareInit = async () => {
  const data = await getSignature(); // 后端提供的获取签名api，具体实现可以看上面的”获取签名信息参考代码”小节
  const { appId, timestamp, nonceStr, signature } = data!;
  wxConfig({
    appId,
    timestamp,
    nonceStr,
    signature,
    jsApiList: [
      // 分享需要用到以下几个接口
      "updateAppMessageShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      "updateTimelineShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      "updateTimelineShareData", // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    ],
    onReady: () => {
      shareApp({
        title: "十一届中国科博会",
        desc: "欢迎来到第十一届中国科技博览会云展览",
        link: WX_URL,
        imgUrl: "https://kbhyzl.mianyang.cn/share.jpg",
      }); // 分享配置
    },
    onError: (error: any) => {
      console.log("初始化失败", error);
    },
  });
};
